<template>
  <div id="search">
    <Header title="搜索" />
    <div class="container">
      <van-tabs color="#3A73F6" @click="tabAction" title-active-color="#3A73F6" v-model="active">
        <van-tab title="按任务时间">
          <div class="tab-contnet">
            <van-field v-model="postData.yongCheRen" name="用车人" label="用车人" placeholder="请填用车人" />
            <van-field v-model="postData.applyDept" name="用车单位" label="用车单位" placeholder="请填用车单位" />
            <van-field
              v-model="postData.driverName"
              name="驾驶员姓名"
              label="驾驶员姓名"
              placeholder="请填驾驶员姓名"
            />
            <van-field v-model="postData.carNum" name="车牌号" label="车牌号" placeholder="请填车牌号" />
            <van-field
              readonly
              clickable
              v-model="postData.timeStart"
              name="出发时间"
              label="出发时间"
              placeholder="请填出发时间"
              @click="showDatePicker('startTime')"
            />
            <van-field
              readonly
              clickable
              v-model="postData.timeEnd"
              name="结束时间"
              label="结束时间"
              placeholder="请填结束时间"
              @click="showDatePicker('endTime')"
            />
          </div>
        </van-tab>
        <van-tab title="按出车时间">
             <div class="tab-contnet">
            <van-field v-model="postData.yongCheRen" name="用车人" label="用车人" placeholder="请填用车人" />
            <van-field v-model="postData.applyDept" name="用车单位" label="用车单位" placeholder="请填用车单位" />
            <van-field
              v-model="postData.driverName"
              name="驾驶员姓名"
              label="驾驶员姓名"
              placeholder="请填驾驶员姓名"
            />
            <van-field v-model="postData.carNum" name="车牌号" label="车牌号" placeholder="请填车牌号" />
            <van-field
              readonly
              clickable
              v-model="postData.timeStart"
              name="出发时间"
              label="出发时间"
              placeholder="请填出发时间"
              @click="showDatePicker('startTime')"
            />
            <van-field
              readonly
              clickable
              v-model="postData.timeEnd"
              name="结束时间"
              label="结束时间"
              placeholder="请填结束时间"
              @click="showDatePicker('endTime')"
            />
          </div>
        </van-tab>
        <van-tab title="按申请时间">
             <div class="tab-contnet">
            <van-field v-model="postData.yongCheRen" name="用车人" label="用车人" placeholder="请填用车人" />
            <van-field v-model="postData.applyDept" name="用车单位" label="用车单位" placeholder="请填用车单位" />
            <van-field
              v-model="postData.driverName"
              name="驾驶员姓名"
              label="驾驶员姓名"
              placeholder="请填驾驶员姓名"
            />
            <van-field v-model="postData.carNum" name="车牌号" label="车牌号" placeholder="请填车牌号" />
            <van-field
              readonly
              clickable
              v-model="postData.timeStart"
              name="出发时间"
              label="出发时间"
              placeholder="请填出发时间"
              @click="showDatePicker('startTime')"
            />
            <van-field
              readonly
              clickable
              v-model="postData.timeEnd"
              name="结束时间"
              label="结束时间"
              placeholder="请填结束时间"
              @click="showDatePicker('endTime')"
            />
          </div>
        </van-tab>
        <van-tab title="按归队时间">
             <div class="tab-contnet">
            <van-field v-model="postData.yongCheRen" name="用车人" label="用车人" placeholder="请填用车人" />
            <van-field v-model="postData.applyDept" name="用车单位" label="用车单位" placeholder="请填用车单位" />
            <van-field
              v-model="postData.driverName"
              name="驾驶员姓名"
              label="驾驶员姓名"
              placeholder="请填驾驶员姓名"
            />
            <van-field v-model="postData.carNum" name="车牌号" label="车牌号" placeholder="请填车牌号" />
            <van-field
              readonly
              clickable
              v-model="postData.timeStart"
              name="出发时间"
              label="出发时间"
              placeholder="请填出发时间"
              @click="showDatePicker('startTime')"
            />
            <van-field
              readonly
              clickable
              v-model="postData.timeEnd"
              name="结束时间"
              label="结束时间"
              placeholder="请填结束时间"
              @click="showDatePicker('endTime')"
            />
          </div>
        </van-tab>
      </van-tabs>
      <div class="bottom">
       <van-button
        @click="postAction"
        type="primary"
        size="large"
        color="#3A73F6"
        >搜索</van-button>
      </div>
    </div>
    
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="datetime"
        @cancel="showPicker = false"
        value="currentDate"
        @confirm="datePickerConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import Header from "../../components/Header";
import {dateFormat} from '../../util/date.js'

export default {
  name: "Details",
  data() {
    return {
      show: false,
      showPicker: false,
      reason: "",
      apply: {},
      postData: {
        yongCheRen: "",
        applyDept: "",
        driverName: "",
        carNum: "",
        timeStart: "",
        timeEnd: "",
        timeState:1
      },
      datePickerType: "startTime",
      active: 0
    };
  },
  mounted() {},

  methods: {
    postAction(){
      console.log(this.postData);
      this.$router.push({ path: '/searchList',query:{data:this.postData}})
    },
    tabAction(e) {
      let postData = this.postData;
      postData.timeState=e+1
      this.postData=postData
    },
    datePickerConfirm(e) {
      let postData = this.postData;
      let date=dateFormat(e,"YYYY-mm-dd HH:MM")
      switch (this.datePickerType) {
        case "startTime":
          postData.timeStart = date;
          break;
        case "endTime":
          postData.timeEnd = date;

          break;
      }
      this.postData = postData;
        this.showPicker = false;
    },
    showDatePicker(type) {
      this.datePickerType = type;
      this.showPicker = true;
    }
  },
  components: {
    Header: Header
  }
};
</script>
<style scoped>
.tab-contnet {
  margin: 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 40px 0px rgba(120, 120, 120, 0.2);
  border-radius: 12px;
}
.bottom{
    margin:20px;
}
</style>